<template>
  <div id="app">
    <div class="profile">
      <div v-for="(item, index) in List" :key="index" class="box">
        <img :src="item.img" class="photo" />
        <div class="info">
          <h1>{{ item.name }}</h1>
          <p>{{ item.className }}</p>
          <p>{{ item.content }}</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      List: [
        {
          img: require('@/assets/succ-1.png'),
          name: "于灿宇",
          className: "21网络01",
          content: "获评标兵:“春笋”标兵、”433”成才标兵",
        },
        {
          img: require('@/assets/2.png'),
          name: "徐冠伟",
          className: "21计应02",
          content: "获评标兵:“433”成才标兵",
        },
        {
          img: require('@/assets/3.png'),
          name: "王宇杭",
          className: "21计应06",
          content: "获评标兵:“433”成才标兵",
        },
        {
          img: require('@/assets/7.png'),
          name: "程敏",
          className: "21物联01",
          content: "获评标兵:“433”成才标兵",
        },
        {
          img: require('@/assets/5.png'),
          name: "李静",
          className: "21物联03",
          content: "获评标兵:“春笋“行动标兵、“433”成才标兵",
        },
        {
          img: require('@/assets/6.png'),
          name: "冯淘炜",
          className: "21计应02",
          content: "获评标兵:“春笋”行动标兵、“433”成才标兵",
        },
      ]
    }
  },
};
</script>

<style scoped>
#app {
  padding: 20px;
}
.box {
  text-align: center;
  width: 260px;
  margin-right: 100px;
  margin-bottom: 20px;
}
.profile {
  display: flex;
  flex-wrap: wrap;
  /* background-color: pink; */
}

.photo {
  width: 150px; /* Adjust the size of the photo as needed */
  height: 180px;
}

.content-box {
  border: 1px solid #ccc;
  padding: 10px;
  margin-top: 10px;
}
</style>
